<template>
  <div class="container">
    <div class="header">
      绑定手机号
    </div>
    <div class="form">
      <div class="section form-tel"
           v-if="isTel">
        <div class="user-tel inp1">
          <input type="number"
                 class="inp tel-inp"
                 placeholder="请输入手机号"
                 maxlength="11"
                 v-model="user_tel">
          <div class="icon">
            <img :src="base_url+'/login/shouji@2x.png'"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
        </div>
        <div class="user-check inp2">
          <input type="number"
                 class="inp check-inp"
                 placeholder="请输入验证码"
                 maxlength="6"
                 v-model="user_check">
          <div class="icon">
            <img :src="base_url+'/login/yanzhengma@2x.png'"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
          <div class="get-msg"
               @tap="get_msg()">{{msg_btn}}</div>
        </div>
        <div class="sub-btn"
             @tap="to_next()">进入美美咖</div>
      </div>
    </div>
    <div class="protocal"
         v-if="step==2">
      <div class="content">
        <div class="title">
          美美咖用户协议
          <div class="close"
               @tap="close()">×</div>
        </div>
        <div class="message">
          <scroll-view :scroll-y="true"
                       :style="{'height': '100%'}">
            注册前请务必仔细阅读以下协议内容：
            <br /> 本协议是用户（以下简称“您”或“会员”）与美美咖App（简称“本平台”）所有者及武汉美美咖科技有限公司（以下简称为“我司”）之间就本平台服务等相关事宜所订立的契约，请您仔细阅读本注册协议，特别是以黑体、加粗、下划线、斜体等方式显著标识的条款以及其中的免责条款和限制条款，他们将影响到您的权利和义务，您选择"同意条款"完成注册，即视为您接受并同意遵守本协议的约定。本平台会根据法律法规及其他情况变化在必要时修改服务条款或规则，本平台服务条款一旦发生变动，请用户及时关注和了解该变动。如果您对本协议的修改有异议，或对本平台的服务不满，您可以行使如下权利：停止使用本平台所提供的网络服务；或，通过客服进行投诉服务。 
            <br />  第1条  本站服务条款的确认和接纳 
            <br /> 1.1本平台的各项医疗美容服务的所有权和运作权归本平台所有。您同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。您确认：本协议条款是处理双方权利义务的依据，始终有效，法律另有强制性规定或双方另有特别约定的，依其规定或约定。 
            <br /> 1.2您点击同意本协议的，即视为您确认自己具有享受本平台服务、进行服务预约、缴纳定金、购买美美咖商品等相应的权利能力和行为能力，能够独立承担法律责任。 
            <br /> 1.3您确认，如果您在18周岁以下，您只能在父母或其他监护人的监护参与下才能使用本平台。 
            <br /> 1.本平台保留在中华人民共和国大陆地区施行之法律允许的范围内独自决定拒绝服务、关闭用户账户、清除或编辑内容或取消预约的权利。本平台有权行使修改或中断服务的权利，不需对用户或任何无直接关系的第三方负责。 
            <br /> 1.5您使用本平台提供的服务时，应同时接受适用于本站特定服务、活动等的准则、条款和协议（以下统称为“其他条款”）；如果以下使用条件与“其他条款”有不一致之处，则以“其他条款”为准。 
            <br /> 1.6为表述便利，本站的各类服务、活动等简称为“服务”。 
            <br /> 第2条  本平台服务 
            <br /> 2.1本平台服务说明：本平台是将有资质的医疗美容机构提供的医疗美容服务信息及医疗美容机构、医生、接受医疗美容服务的消费者所分享的经验、体会等信息汇集于互联网平台供用户查阅的互联网信息服务提供商，同时帮助用户通过互联网与上述医疗美容机构联系并预订相关医疗美容服务项目。本平台并不提供具体的医疗美容服务，对于涉及医疗美容的具体服务将由有资质的服务商（医疗美容机构）提供。对用户预订的服务项目中出现的瑕疵等问题，本平台并不承担责任，但本平台将尽力协助用户与相关医疗美容服务项目提供商进行协商，不能协商解决的，用户可以向消费者协会投诉或通过法律途径解决。本平台通过互联网依法为您提供互联网信息等服务，您在完全同意本协议及本平台相关规定的情况下，方有权使用本站的相关服务。 
            <br /> 2.2您必须自行准备如下设备和承担如下开支： 
            <br /> 2.2.1上网设备，包括并不限于电脑或者其他上网终端、调制解调器及其他必备的上网装置； 
            <br /> 2.2.2上网开支，包括并不限于网络接入费、上网设备租用费、手机流量费等。 
            <br /> 第3条  用户信息收集及保护 
            <br /> 3.1您应自行诚信向本平台提供注册资料，您保证提供的注册资料真实、准确、完整、合法有效，您的注册资料如有变动的，应及时更新其注册资料。如果您提供的注册资料不合法、不真实、不准确、不详尽的，您需承担因此引起的相应责任及后果，并且本平台保留单方终止您使用本平台各项服务的权利。 
            <br /> 3.2您在本站进行注册、浏览、预定服务商提供的服务、评价、参加活动等行为时，涉及您真实姓名/名称、通信地址、联系电话、电子邮箱、预定订单详情、评价或反馈、投诉内容、cookies等信息的，本站有权从完成交易、客户服务、开展活动、完成良好的客户体验等多种角度予以收集，并将对其中涉及个人隐私信息予以严格保密，除非得到您的授权、为履行强行性法律义务（如国家安全机关指令）或法律另有规定、本注册协议或其他条款另有约定外，本站不会向外界披露您的隐私信息。 
            <br /> 3.3您注册成功后，将产生用户名和密码等账户信息，您可以根据本站规定更改您的密码和设定昵称。您应谨慎合理的保存、使用您的账户信息。您若发现任何非法使用您的账户或其他存在安全漏洞的情况的，请立即通知本平台并向公安机关报案。 
            <br /> 3.4您同意，本平台拥有通过邮件、短信、电话、网站通知或声明等形式，向在本平台注册、参与活动的用户、收货人发送服务信息、各项活动、客户服务等告知信息的权利。如您不希望接收上述信息，可退订。 
            <br /> 3.5您同意：您通过本站向本站的服务提供商（以下统称为“服务商”）提交预定或预约服务的，视为您向服务商披露个人相关信息，接受服务商向您提供客户服务、处理信用卡付款、数据分析、市场营销帮助或其他必要事宜；如前述全部或部分事宜之一涉及由服务商外的第三方履行的，服务商有权将您的信息以必要方式向第三方披露，第三方有权以履行上述事宜为目的联系您。 
            <br /> 3.6您不得将在本站注册获得的账号、密码等账户信息提供给他人使用，否则您应承担由此产生的全部责任，并与实际使用人承担连带责任。 
            <br /> 3.7您同意，本平台有权使用您的注册信息、用户名、密码等信息，登陆进入您的注册账户，进行证据保全，包括但不限于公证、见证、协助司法机关进行调查取证等。 
            <br /> 第4条  用户依法享受本平台服务应履行的义务 
            <br /> 本协议依据国家相关法律法规规章制定，您同意严格遵守以下义务： 
            <br /> 4.1不得传输或发表：煽动抗拒、破坏宪法和法律、行政法规实施的言论，煽动颠覆国家政权，推翻社会主义制度的言论，煽动分裂国家、破坏国家统一的言论，煽动民族仇恨、民族歧视、破坏民族团结的言论； 
            <br /> 4.2从中国大陆向境外传输资料信息时必须符合中国有关法律法规； 
            <br /> 4.3不得利用本站从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动； 
            <br /> 4.4不得干扰本站的正常运转，不得侵入本站及国家计算机信息系统； 
            <br /> 4.5不得传输或发表任何违法犯罪的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的，淫秽的、不文明的等信息资料； 
            <br /> 4.6不得传输或发表损害国家社会公共利益和涉及国家安全的信息资料或言论； 
            <br /> 4.7不得教唆他人从事本条所禁止的行为； 
            <br /> 4.8除本注册协议、其他条款或另有其他约定外，您不得利用在本站注册的账户进行经营活动、牟利行为及其他未经本站许可的行为，包括但不限于以下行为： 
            <br /> 4.8.1您账户内的任何本平台优惠信息（包括但不限于本平台券、预约券及其他形式优惠或折扣等）由本平台享有解释权和修改权，您仅享有在选择在本平台进行服务信息发布的医疗服务机构服务时的使用权，严禁转卖本平台账户、本平台券、预约券或其他类型的优惠券、卡、或利用本平台账户进行其他经营性行为等； 
            <br /> 4.8.2通过任何手段恶意注册本平台帐号，包括但不限于以牟利、炒作、套现、获奖等为目的多个账号注册。用户亦不得盗用其他用户帐号。
          </scroll-view>
        </div>
        <div class="btn"
             @tap.stop="sub_form()">
          我已阅读并确认加入
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
let timer;
export default {
  data () {
    return {
      base_url: common.image_resource,
      isTel: true,
      showPwd: false,
      user_tel: "",
      user_check: "",
      msg_btn: "发送验证码",
      openid: "",
      step: 1,
      login_pwd: "",
      login_pwd_repeat: "",
      num: 60,
      is_register: false,
      j_url: "",
      user_data: {}
    };
  },
  methods: {
    toggleType () {
      if (this.showPwd) {
        this.showPwd = false;
      } else {
        this.showPwd = true;
      }
      return false;
    },
    get_msg () {
      if (this.num < 60) {
        return false;
      }

      if (this.user_tel == "") {
        common.mmk_Loading(2, "手机号不能为空")
        return false;
      } else {
        common.mmk_Loading(0)
        common.fly_post("api/v4_2/binding_sms/send", {
          mobile: this.user_tel
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "短信发送成功，请注意查收")
            timer = setInterval(() => {
              this.msg_btn = this.num + "秒后可重新发送";
              this.num--;
              if (this.num <= 0) {
                clearInterval(timer);
                this.msg_btn = "发送验证码";
                this.num = 60;
              }
            }, 1000);
          } else {
            common.mmk_Loading(2, res.message)
            return false;
          }
        })
      }
    },
    to_next () {
      if (this.user_tel == "") {
        common.mmk_Loading(2, "请输入手机号")
        return false;
      } else if (this.user_check == "") {
        common.mmk_Loading(2, "请输入验证码")
        return false;
      } else {
        this.step = 2;
      }
    },
    close () {
      this.step = 1;
    },
    sub_form () {
      let that = this
      if (this.user_tel == "") {
        common.mmk_Loading(2, "请输入手机号")
        return false;
      }
      if (this.user_check == "") {
        common.mmk_Loading(2, "请输入验证码")
        return false;
      } else {
        common.mmk_Loading(0)
        common.fly_post("api/v4_2/minapp/bind_mobile", {
          id: wx.getStorageSync("user_id"),
          mobile: this.user_tel,
          verify_code: this.user_check
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "绑定成功")
            wx.setStorageSync("user_token", res.data.token);
            wx.setStorageSync("user_id", res.data.user_id);
             wx.setStorageSync("account_type", res.data.user.data.account_type);
            wx.setStorageSync("role_id", res.data.user.data.role_id);
            // 如果由上级信息，就绑定接口
            if (this.user_data.sid) {
              common.fly_post(
                "api/v4_2/user/share",
                {
                  type: that.user_data.t,
                  sid: that.user_data.sid,
                  d: that.user_data.d
                },
                response => {
                  setTimeout(() => {
                    if (that.j_url) {
                      if (that.user_data.t == 13) {
                        wx.reLaunch({ url: that.j_url + '&share_id=' + that.user_data.sid });
                      } else {
                        wx.reLaunch({ url: that.j_url });
                      }
                    } else {
                      wx.navigateBack({
                        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                      });
                    }
                  }, 1000);
                }
              );
            } else {
              setTimeout(() => {
                if (this.j_url) {
                  wx.redirectTo({ url: this.j_url });
                } else {
                  wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                  });
                }
              }, 1500);
            }

          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }
    }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "绑定手机号"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FF383E", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });

    if (options.j_url) {
      let str = decodeURIComponent(options.j_url)
      this.j_url = str
    }
    if (options.user_data) {
      this.user_data = JSON.parse(options.user_data)
    }
    this.openid = options.openid;
  },

};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .header {
    padding-left: 15px;
    line-height: 54px;
    font-size: 17px;
    font-family: "Medium";
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    background-image: url("https://h5.ameimeika.com/mp_images/mp_2.0/wode/denglu@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .form {
    flex: 1;
    padding: 0 15px;
    background-color: #fff;
    .section {
      width: 100%;
      .inp1,
      .inp2 {
        width: 345px;
        height: 44px;
        line-height: 44px;
        background: rgba(255, 255, 255, 1);
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
        position: relative;
        .inp {
          width: 100%;
          height: 100%;
          display: block;
          padding-left: 40px;
          font-size: 17px;
        }
        .icon {
          height: 30px;
          width: 30px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          .img {
            height: 100%;
            width: 100%;
            display: block;
            vertical-align: middle;
          }
        }
      }
      .inp1 {
        margin: 40px auto 20px;
      }
      .inp2 {
      }
      .sub-btn {
        display: block;
        width: 285px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: rgba(255, 56, 62, 1);
        box-shadow: 0px 4px 6px 0px rgba(255, 133, 154, 0.78);
        border-radius: 24px;
        color: #fff;
        font-size: 17px;
        font-family: "Regular";
        color: rgba(255, 255, 255, 1);
        margin: 175px auto 0;
      }
    }
    .form-tel {
      .user-check {
        .get-msg {
          min-width: 80px;
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 20px;
          opacity: 0.6;
          border: 1px solid #ff383e;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;
          font-size: 12px;
          font-family: "Regular";
          color: #ff383e;
          z-index: 99;
        }
      }
    }
    .form-password {
      .password,
      .text {
        width: 100%;
        height: 100%;
      }
      .user-pwd {
        .showPwd {
          width: 25px;
          height: 25px;
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          padding: 5px;
          z-index: 99;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
  }
  .protocal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.4);
    .content {
      width: 100%;
      height: 334px;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px 10px 0px 0px;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      transition: all 1s;
      .title {
        font-size: 14px;
        font-family: "Medium";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 44px;
        text-align: center;
        border-bottom: 1px solid rgba(224, 224, 224, 1);
        margin: 0 15px;
        position: relative;
        .close {
          width: 10px;
          height: 10px;
          position: absolute;
          top: 15px;
          right: 15px;
          line-height: 20px;
          text-align: center;
          font-size: 20px;
        }
      }
      .message {
        flex: 1;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px 10px 0px 0px;
        overflow: auto;
        padding: 15px 15px 60px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .btn {
        width: 100%;
        height: 50px;
        background: rgba(255, 56, 62, 1);
        font-size: 17px;
        font-family: "Medium";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 50px;
        text-align: center;
        position: absolute;
        bottom: 0;
      }
    }
  }
}
</style>

